<template>
	<div class="searchBox">
		<div>
			<div class="el">
				<form @submit.prevent="setSearch()">
					<input type="search" placeholder="输入书名与作者" v-model="keywords" />
					<input type="submit" value="搜索" @click="btn()" />
				</form>
			</div>
		</div>
		<div class="secSearch">
			<div class="menu" v-for="(item ,index) in listArr" :key="index" :class="{'activeCss':activeVar==index}"
				@click="active(item,index)">
				<div>{{item}}</div>
			</div>
			<div class="history">
				<h4>历史搜索</h4>
				<span v-for="(item,i) in hlist" :key="i" style="max-width: 100px;">{{item}}</span>
				<button @click="remove()">全部清空</button>
			</div>
			<div class="history">
				<h4>热门搜索</h4>
			</div>
		</div>
		<div style="display: flex; justify-content: center;">
			<div style="background: linear-gradient(pink,white);width: 50%; height: 300px; border-radius: 2%;">
				<h4>孔网畅销榜单</h4>
				<MobileList proptitle="热门推荐" :proplist='hotlist'></MobileList>
				<a><button style="border: none;color: blue;background-color: pink;">查看更多 ></button></a>
			</div>
			<div style="background: linear-gradient(pink,white);width: 50%;height: 300px; border-radius: 2%;">
				<h4>热度飙升榜</h4>
				<MobileList proptitle="热门推荐" :proplist='hotlist'></MobileList>
				<a><button style="border: none;color: blue;background-color: pink;">查看更多 ></button></a>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import MobileList from '@/components/mobile/home/MobileList.vue'
	export default {
		name: 'MobileFind',
		components: {
			MobileList
		},
		data() {
			return {
				keywords: '',
				historyList: [],
				input: this.$route.query.input,
				data: [],
				hotlist: [],
				o: '',
				histories: [],
				books: [],
				id: 1,
				activeVar:0,
				listArr:["商品","书目","拍卖","店铺"]
			}
		},
		computed: {
			...mapState('search', ['hlist']),
		},
		methods: {
			activeFun(item,index){
				this.activeVar=index
			},
			btn() {
				if (this.o != '') {
					this.histories.push(this.o);
				}
				console.log(this.o)
				this.books.forEach((item) => {
					console.log("id=========" + item.id);
					if (this.o == item.name) {
						this.id = item.id;
						console.log(this.id)
						console.log(item.name);
					}
				})
				this.o = '';
				this.$router.push({
					path: '/mobile/detail/',
					query: {
						id: this.id
					}
				})
				this.id = 0;
			},

			//格式：moaActions('模块名',[调用方法])
			...mapActions('search', ['actionHistory']),
			setSearch() {
				//调用search模块的函数actiomHistory，并将当前组件的data数据传递过去vuex
				this.actionHistory(this.keywords)
				this.keywords = ''
			},
			remove() {
				this.actionHistory(this.keywords)
				this.keywords = ''
			}
		},
		mounted() {
			this.$get("/api/public/findHot/1/3").then((resp) => {
				this.hotlist = resp.data.data
				console.log(this.hotlist);
			})
		}
	}
</script>

<style scoped>
	.secSearch {
		width: 100%;
		height: 600px;
	}

	.searchBox {
		width: 100%;
	}

	.el {
		width: 70%;
		margin-left: 15%;
	}

	.menu {
		width: 22%;
		cursor: pointer;
		float: left;
	}

	.menu h3 {
		width: 20%;
		margin-left: 8%;
	}
</style>